/**
 * PostCSS配置文件
 * PostCSS是一个用JavaScript转换CSS的工具
 * 它可以通过各种插件对CSS进行处理，如添加浏览器前缀、转换单位等
 */
module.exports = {
    // 配置要使用的PostCSS插件
    plugins: {
        /**
         * autoprefixer插件
         * 自动添加浏览器前缀，解决浏览器兼容性问题
         * 例如：将 transform: rotate(45deg) 转换为：
         * -webkit-transform: rotate(45deg);
         * -ms-transform: rotate(45deg);
         * transform: rotate(45deg);
         */
        autoprefixer: {
            // 指定需要支持的浏览器版本
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8']
        },

        /**
         * postcss-px-to-viewport插件
         * 将px单位转换为vw单位，实现移动端适配
         * 例如：将 width: 375px 转换为 width: 100vw
         * 这样无论屏幕大小如何，元素都会按比例缩放
         */
        'postcss-px-to-viewport-8': {
            viewportWidth: 375, // 视窗的宽度，对应的是设计稿的宽度（通常是375px或750px）
            viewportHeight: 667, // 视窗的高度，对应的是设计稿的高度（通常是667px或1334px）
            unitPrecision: 5, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义
            minPixelValue: 1, // 小于或等于1px不转换为视窗单位，可以避免出现过小的单位值
            mediaQuery: false, // 是否允许在媒体查询中转换px，默认false
            exclude: [/node_modules/] // 忽略node_modules目录下的文件，提高编译性能
        }
    }
} 